<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="JinTaoOO">
    
    
    
    
    
    
    <title>webSocket实现多人你画我猜 | JinTaoOO</title>
    <link href="http://example.com" rel="prefetch" />

    
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/aos.css">
<link rel="stylesheet" href="/css/style.css">

    
<script src="/js/jquery.min.js"></script>

    
<script src="/js/bootstrap.min.js"></script>

    
<script src="/js/aos.js"></script>

    
<script src="/js/highslide/highslide-full.min.js"></script>

    
<link rel="stylesheet" href="/js/highslide/highslide.css">

    <style type="text/css">
        @media (max-width: 768px) {
            body {
                background-color: #f0f0f0;
                background: url('/imgs/xsbg.gif');
                background-attachment: fixed;
            }
        }
    </style>
    
    <!--<script type="text/javascript">
      if (document.images) {
        var avatar = new Image();
        avatar.src = '/imgs/avatar.jpg'
        var previews = 'preview1.jpg,preview2.jpg,preview3.jpg,preview4.jpg'.split(',')
        var previewsPreLoad = []
        for(var i = 0; i < length; i++) {
          previewsPreLoad.push(new Image())
          previewsPreLoad[previewsPreLoad.length - 1].src = '/imgs/preview' + previews[i]
        }
      }
    </script>-->
<meta name="generator" content="Hexo 5.3.0"></head>
<body>
    <!-- 背景轮播图功能 -->
    <section class="hidden-xs">
    <ul class="cb-slideshow">
        <li><span>天若</span></li>
        <li><span>有情</span></li>
        <li><span>天亦老</span></li>
        <li><span>我为</span></li>
        <li><span>长者</span></li>
        <li><span>续一秒</span></li>
    </ul>
</section>
    <!-- 欧尼酱功能, 谁用谁知道 -->
    
    <header class="navbar navbar-inverse" id="gal-header">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target=".bs-navbar-collapse"
                    aria-expanded="false">
                <span class="fa fa-lg fa-reorder"></span>
            </button>
            <a href="http://example.com">
                
                <style>
                    #gal-header .navbar-brand {
                        height: 54px;
                        line-height: 24px;
                        font-size: 28px;
                        opacity: 1;
                        background-color: rgba(0,0,0,0);
                        text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;
                    }
                </style>
                <!-- 这里使用文字(navbar_text or config.title) -->
                <div class="navbar-brand">JinTaoOO</div>
                
            </a>
        </div>
        <div class="collapse navbar-collapse bs-navbar-collapse">
            <ul class="nav navbar-nav" id="menu-gal">
                
                
                <li class="">
                    <a href="/">
                        <i class="fa fa-home"></i>首页
                    </a>
                </li>
                
                
                
                <li class="">
                    <a href="/archives">
                        <i class="fa fa-archive"></i>归档
                    </a>
                </li>
                
                
                
                
                <li class="">
                    <a href="/categories">
                        <i class="fa fa-list"></i>分类
                    </a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="/tags">
                        <i class="fa fa-tags"></i>标签
                    </a>
                </li>
                
                
                
                
                <li class="">
                    <a href="/about">
                        <i class="fa fa-user"></i>关于我
                    </a>
                </li>
                
                
            </ul>
        </div>
    </div>
</header>
    <div id="gal-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 gal-right" id="mainstay">
                    
<article class="article well article-body" id="article">
    <div class="breadcrumb">
        <i class="fa fa-home"></i>
        <a href="http://example.com">JinTaoOO</a>
        >
        <span>webSocket实现多人你画我猜</span>
    </div>
    <!-- 大型设备详细文章 -->
    <div class="hidden-xs">
        <div class="title-article">
            <h1>
                <a href="/2019/04/07/webSocket/">webSocket实现多人你画我猜</a>
            </h1>
        </div>
        <div class="tag-article">
            
            <span class="label label-gal">
                <i class="fa fa-calendar"></i> 2019-04-07
            </span>
            
        </div>
    </div>
    <!-- 小型设备详细文章 -->
    <div class="visible-xs">
        <center>
            <div class="title-article">
                <h4>
                    <a href="/2019/04/07/webSocket/">webSocket实现多人你画我猜</a>
                </h4>
            </div>
            <p>
                <i class="fa fa-calendar"></i> 2019-04-07
            </p>
            <p>
                
                
            </p>
        </center>
    </div>
    <div class="content-article">
        <p>简介：Socket.IO 是一个支持基于事件的实时双向通信的类库，它可以在任何平台，浏览器或设备上工作，同时在可靠性和速度方面有保证，可以构建实时性很强的应用。它兼容性极好，对于不兼容的环境采用降级策略，支持的浏览器最低达 IE5.5</p>
<h3 id="Node-服务端代码"><a href="#Node-服务端代码" class="headerlink" title="Node 服务端代码"></a>Node 服务端代码</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> app = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>)();</span><br><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> server = <span class="built_in">require</span>(<span class="string">&quot;http&quot;</span>).Server(app);</span><br><span class="line"><span class="keyword">var</span> io = <span class="built_in">require</span>(<span class="string">&quot;socket.io&quot;</span>)(server);</span><br><span class="line"></span><br><span class="line">app.use(express.static(<span class="string">&quot;./static&quot;</span>));</span><br><span class="line"></span><br><span class="line">server.listen(<span class="number">8000</span>);</span><br><span class="line"><span class="comment">// 所有连接的客户端 都在 io.on connection 里</span></span><br><span class="line">io.on(<span class="string">&quot;connection&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">socket</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// socket.on 服务端接收 start 事件</span></span><br><span class="line">  socket.on(<span class="string">&quot;start&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">start</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(start);</span><br><span class="line">    <span class="comment">// io.emit向所有的的客户端 推送</span></span><br><span class="line">    <span class="comment">// socket.emit 向单个ip 推送 不填写是直推送给自己</span></span><br><span class="line">    io.emit(<span class="string">&quot;start&quot;</span>, start);</span><br><span class="line">  &#125;);</span><br><span class="line">  socket.on(<span class="string">&quot;end&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">end</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(end);</span><br><span class="line">    io.emit(<span class="string">&quot;end&quot;</span>, end);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="Html-前端代码"><a href="#Html-前端代码" class="headerlink" title="Html 前端代码"></a>Html 前端代码</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">    html,</span><br><span class="line">    body &#123;</span><br><span class="line">      padding: 0;</span><br><span class="line">      margin: 0;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-id">#huaban</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#000</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">&quot;huaban&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 引入socket.io.js --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./socket.io.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// var socket = io.connect(&#x27;后端服务器地址&#x27;);</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> socket = io.connect(<span class="string">&quot;http://192.168.11.148:8000&quot;</span>);</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 画布设置</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> canvas = <span class="built_in">document</span>.getElementById(<span class="string">&quot;huaban&quot;</span>);</span></span><br><span class="line"><span class="javascript">      canvas.width = <span class="built_in">window</span>.innerWidth - <span class="number">2</span>;</span></span><br><span class="line"><span class="javascript">      canvas.height = <span class="built_in">window</span>.innerHeight - <span class="number">2</span>;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">&quot;2d&quot;</span>);</span></span><br><span class="line"><span class="javascript">      ctx.fillStyle = <span class="string">&quot;rgba(0, 0, 200, 0.5)&quot;</span>;</span></span><br><span class="line">      ctx.lineWidth = 5;</span><br><span class="line"><span class="javascript">      canvas.onmousedown = <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 鼠标按下时 发送事件名为start 内容为鼠标点击坐标</span></span></span><br><span class="line"><span class="javascript">        socket.emit(<span class="string">&quot;start&quot;</span>, &#123; <span class="attr">x</span>: e.pageX, <span class="attr">y</span>: e.pageY &#125;);</span></span><br><span class="line"><span class="javascript">        canvas.onmousemove = <span class="function">(<span class="params">eve</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="comment">//  鼠标移动时 发送事件名为start 内容为鼠标每次移动坐标</span></span></span><br><span class="line"><span class="javascript">          socket.emit(<span class="string">&quot;end&quot;</span>, &#123; <span class="attr">x</span>: eve.pageX, <span class="attr">y</span>: eve.pageY &#125;);</span></span><br><span class="line">        &#125;;</span><br><span class="line"><span class="javascript">        <span class="comment">//  鼠标松开 去除移动事件</span></span></span><br><span class="line"><span class="javascript">        canvas.onmouseup = <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          canvas.onmousemove = <span class="literal">null</span>;</span></span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;;</span><br><span class="line"><span class="javascript">      <span class="comment">// 监听后端 start 事件</span></span></span><br><span class="line"><span class="javascript">      socket.on(<span class="string">&quot;start&quot;</span>, <span class="function">(<span class="params">start</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// start 后端发送的内容</span></span></span><br><span class="line">        ctx.beginPath();</span><br><span class="line">        ctx.strokeStyle =</span><br><span class="line"><span class="javascript">          <span class="string">&quot;#&quot;</span> +</span></span><br><span class="line"><span class="javascript">          (<span class="string">&quot;00000&quot;</span> + ((<span class="built_in">Math</span>.random() * <span class="number">0x1000000</span>) &lt;&lt; <span class="number">0</span>).toString(<span class="number">16</span>)).substr(</span></span><br><span class="line">            -6</span><br><span class="line">          );</span><br><span class="line"><span class="javascript">        ctx.moveTo(start.x, start.y); <span class="comment">//起点</span></span></span><br><span class="line">      &#125;);</span><br><span class="line"><span class="javascript">      <span class="comment">// 监听前端end 事件</span></span></span><br><span class="line"><span class="javascript">      socket.on(<span class="string">&quot;end&quot;</span>, <span class="function">(<span class="params">end</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(end);</span></span><br><span class="line"><span class="javascript">        ctx.lineTo(end.x, end.y); <span class="comment">//终点</span></span></span><br><span class="line">        ctx.stroke();</span><br><span class="line">      &#125;);</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>socket 笔记 画  重点 后面要考 - -</p>
<p>Node :</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">io.on(<span class="string">&#x27;connection&#x27;</span>,<span class="function">(<span class="params">socket</span>) =&gt;</span> &#123;&#125;) <span class="comment">//监听全局客户端的连接</span></span><br><span class="line">io.emit(<span class="string">&#x27;事件名&#x27;</span>,<span class="function">(<span class="params"><span class="string">&#x27;发送的内容&#x27;</span></span>) =&gt;</span> &#123;&#125;) <span class="comment">//服务器  推送 这里推送的目标是所有已连接的户端</span></span><br><span class="line">socket.on(<span class="string">&#x27;事件名&#x27;</span>,<span class="function">(<span class="params">接受的内容</span>) =&gt;</span> &#123;&#125;)  <span class="comment">//服务器监听事件</span></span><br><span class="line">socket.emit(<span class="string">&#x27;事件名&#x27;</span>,&#123;<span class="string">&#x27;发送的内容&#x27;</span>&#125;) <span class="comment">//服务器  推送 这里推送  是单个客户端 不填 ID 时目标是推送给自己</span></span><br></pre></td></tr></table></figure>
<p>js:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> socket = io.connect(<span class="string">&#x27;后端服务器地址&#x27;</span>) <span class="comment">//绑定服务端</span></span><br><span class="line">socket.on(<span class="string">&quot;start&quot;</span>, <span class="function">(<span class="params"><span class="string">&#x27;接受的内容&#x27;</span></span>) =&gt;</span> &#123;&#125;) <span class="comment">//监听服务端 start 事件</span></span><br><span class="line">socket.emit(<span class="string">&quot;事件&quot;</span>, &#123;<span class="string">&#x27;推送内容&#x27;</span>&#125;) <span class="comment">//推送事件</span></span><br></pre></td></tr></table></figure>
    </div>
</article>


                </div>
                <aside class="col-md-4 gal-left" id="sidebar">
    <!-- 此为sidebar的搜索框, 非搜索结果页面 -->
<aside id="sidebar-search">
    <div class="search hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <form class="form-inline clearfix" id="search-form" method="get"
              action="/search/index.html">
            <input type="text" name="s" class="form-control" id="searchInput" placeholder="搜索文章~" autocomplete="off">
            <button class="btn btn-danger btn-gal" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </form>
    </div>
</aside>
    <aside id="sidebar-author">
    <div class="panel panel-gal" data-aos="flip-right" data-aos-duration="3000">
        <div class="panel-heading" style="text-align: center">
            <i class="fa fa-quote-left"></i>
            JinTaoOO
            <i class="fa fa-quote-right"></i>
        </div>
        <div class="author-panel text-center">
            <img src="/imgs/avatar.jpg" width="140" height="140"
                 alt="个人头像" class="author-image">
            <p class="author-description"></p>
        </div>
    </div>
</aside>
    
    <aside id="sidebar-recent_comments">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-comments"></i>
            最新评论
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush"></ul>
    </div>
</aside>
    
    <!-- 要配置好leancloud才能开启此小工具 -->
    
    
    <aside id="sidebar-recent_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            近期文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/webSocket/">webSocket实现多人你画我猜</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/node-mySql/">使用 Node.js + Express+MySQL 实现简单的增删改查</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/node-mongodb/">Node 查询 mongodb 优化工具 redis</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/fabric/">fabric 高级画板</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="sidebar-rand_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            随机文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/node-mongodb/">Node 查询 mongodb 优化工具 redis</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/node-mySql/">使用 Node.js + Express+MySQL 实现简单的增删改查</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/webSocket/">webSocket实现多人你画我猜</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/07/fabric/">fabric 高级画板</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="gal-sets">
        <div class="panel panel-gal hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <ul class="nav nav-pills pills-gal">

                
                <li>
                    <a href="/2019/04/07/webSocket/index.html#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a>
                </li>
                
                
                <li>
                    <a href="/2019/04/07/webSocket/index.html#sidebar-friend-links" data-toggle="tab" id="friend-links-tab">友情链接</a>
                </li>
                
                
                <li>
                    <a href="/2019/04/07/webSocket/index.html#sidebar-links" data-toggle="tab" id="links-tab">个人链接</a>
                </li>
                
            </ul>
            <div class="tab-content">
                
                <div class="cloud-tags tab-pane nav bs-sidenav fade" id="sidebar-tags">
    
</div>
                
                
                <div class="friend-links tab-pane nav bs-sidenav fade" id="sidebar-friend-links">
    
    <li>
        <a href="https://juejin.cn/" target="_blank">掘金</a>
    </li>
    
</div>
                
                
                <div class="links tab-pane nav bs-sidenav fade" id="sidebar-links">
    
    <li>
        <a href="https://github.com/JinTaoOO" target="_blank">Github</a>
    </li>
    
    <li>
        <a href="https://gitee.com/jintaOO" target="_blank">码云</a>
    </li>
    
    <li>
        <a href="jintaooo@139.com" target="_blank">邮箱</a>
    </li>
    
</div>
                
            </div>
        </div>
    </aside>
    
</aside>
            </div>
        </div>
    </div>
    <footer id="gal-footer">
    <div class="container">
        Copyright © 2018 JinTaoOO Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
    </div>
</footer>

<!-- 回到顶端 -->
<div id="gal-gotop">
    <i class="fa fa-angle-up"></i>
</div>
</body>

<script src="/js/activate-power-mode.js"></script>

<script>

    // 配置highslide
	hs.graphicsDir = '/js/highslide/graphics/'
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.lang.number = '共%2张图, 当前是第%1张';
    hs.addSlideshow({
      interval: 5000,
      repeat: true,
      useControls: true,
      fixedControls: "fit",
      overlayOptions: {
        opacity: 0.75,
        position: "bottom center",
        hideOnMouseOut: true
      }
    })

    // 初始化aos
    AOS.init({
      duration: 1000,
      delay: 0,
      easing: 'ease-out-back'
    });

</script>
<script>
	POWERMODE.colorful = 'true';    // make power mode colorful
	POWERMODE.shake = 'true';       // turn off shake
	// TODO 这里根据具体情况修改
	document.body.addEventListener('input', POWERMODE);
</script>
<script>
    window.slideConfig = {
      prefix: '/imgs/slide/background',
      ext: 'jpg',
      maxCount: '6'
    }
</script>

<script src="/js/hs.js"></script>
<script src="/js/blog.js"></script>




</html>